<script type="text/javascript">
    /**
     * @Description：看板维护（editEqpBoard.gsp）
     * @Author： 樊双峰
     * @Date： 2018-07-03 22:52
     */
    var getEqpInfo = function(editEqpBoardURL) {
        // 数据模型
        var dataModel = new ht.DataModel();
        // 拓扑组件
        var graphView = new ht.graph.GraphView(dataModel);
        view = graphView.getView();
        view.className = 'myCanvas';
        // 将view添加至DOM
        document.body.appendChild(view);
        window.addEventListener('resize', function (e) {
            graphView.invalidate();
        }, false);
        // 设置缩放功能
        graphView.setZoom(0.8);
        graphView.translate(-80, -50);
        graphView.setEditable(true)
        // 撤销和重做
        var historyManager = new ht.HistoryManager(dataModel);
        window.addEventListener('keydown', function (e) {
            if (e.ctrlKey) {
                if (e.keyCode == 90) {  // ctrl + z
                    historyManager.undo();
                } else if (e.keyCode == 89) {   // ctrl + y
                    historyManager.redo();
                }
            }
        });

        <g:each in="${areaList}" status="i" var="a">
            var group${i} = new ht.Group();
            group${i}.setName('${a.AREA_DESC}');
            group${i}.setStyle('group.title.align' ,'center');
            group${i}.setStyle('group.toggleable' ,false);
            group${i}.setStyle('group.title.font' ,'bold 21px arial');
            group${i}.setStyle('group.title.font' ,'bold 21px arial');
            group${i}.setStyle('group.padding', 0);
            group${i}.setStyle('group.padding.left', 0);
            group${i}.setStyle('group.padding.right', -90);
            group${i}.setStyle('group.padding.top', -20);
            group${i}.setStyle('group.padding.bottom', 0);
            group${i}.setStyle('group.background', '#ccc');
            group${i}.setStyle('group.border.pattern', [5,5]);
            group${i}.setStyle('group.border.color', '#fff');
            group${i}.setStyle('group.border.width', '5');
            group${i}.setExpanded(true);
            dataModel.add(group${i});
        </g:each>

        // 获取设备信息
        $.ajax({
            type: 'GET',
            url: editEqpBoardURL+"/EqpBoard/getEqpInfoJson",
            dataType: 'json',
            async: true,
            success: function (data) {
                $.each(data, function (index, items) {
                    // 新建图元
                    var shapeNode = new ht.Node();
                    /* 设置节点允许拖动、编辑 START */
                    shapeNode.setStyle('2d.movable',true);
                    shapeNode.setStyle('2d.editable',true);
                    /* 设置节点允许拖动、编辑 END */
                    // 设置设备描述，setImage在此处只是作为容器
                    shapeNode.setImage(items.EQP_DESC);
                    // 设置图元宽高尺寸
                    shapeNode.setSize(items.EQP_WIDTH, items.EQP_HEIGHT);
                    // 设置图元中心点坐标
                    shapeNode.setPosition(items.EQP_X, items.EQP_Y);
                    // 设置图形
                    shapeNode.setStyle('shape', items.EQP_GRAPH_NAME);
                    // 边框宽度
                    shapeNode.setStyle('shape.border.width', 2);
                    // 字体
                    shapeNode.setStyle('label.font', '15px 微软雅黑')
                    // 设备边框颜色
                    shapeNode.setStyle('shape.border.color', '#000');
                    // 设备背景颜色
                    shapeNode.setStyle('shape.background', items.EQP_COLOR);
                    // ID  移除功能用
                    shapeNode.setStyle('note.offset.x', items.ID);
                    // 设备ID
                    shapeNode.setStyle('label', items.EQP_ID);
                    // 设置透明度为0，不显示
                    shapeNode.setStyle('note.opacity', 0);
                    // 设置报警描述
                    shapeNode.setStyle('note', '已停机！');
                    // 设备ID的位置
                    shapeNode.setStyle('label.position', '17'); // 居中
                    // 旋转角度
                    shapeNode.setRotation(items.EQP_ROTATION);
                    // 将设备添加至区域
                    <g:each in="${areaList}" status="i" var="a">
                        if('${a.AREA_NAME}'==(items.EQP_AREA_NAME)){
                            shapeNode.setParent(group${i});
                        }
                    </g:each>
                    // 将节点加入到数据模型
                    dataModel.add(shapeNode);

                    /* 双击显示设备信息、移除设备功能 START */
                    var eventType = ht.Default.isTouchable ? 'touchend' : 'mouseup';
                    graphView.getView().addEventListener(eventType, function (e) {
                        // 获取事件下的设备
                        var data = graphView.getDataAt(e);
                        var eqp = data.getStyle('label')
                        if (data && ht.Default.isDoubleClick(e)) {
//                            str = "<p><em>设备ID：</em>" + "<span style='color: #ff0000;'>" + data.getStyle('label') + "</span>" + "</p><p><em>描述：</em>" + "<span style='color: #ff0000;'>" + data.getImage() + "</span>"; /* data.getStyle('note') */
//                            $("#actualPower").html(str);
                            $(".contextmenu").css({
                                top: event.pageY,
                                left: event.pageX
                            }).show();
                        }
                        // 移除
                        $(".contextmenu li a").click(function () {
                            var eqpId = Number(data.getStyle('note.offset.x'));
                            var text = $(this).text();
                            layer.confirm('确定要移除<span style="color: red">'+eqp+'</span>吗？', { icon: 3, title: '提示' }, function () {
                                if (text == 'remove') {
                                    $.ajax({
                                        url: editEqpBoardURL+"/EqpBoard/removeNode",
                                        data: {
                                            'id': eqpId
                                        },
                                        success: function () {
                                            $(".contextmenu").hide();
                                            window.location.reload();
                                        },
                                        error: function () {
                                            $(".contextmenu").hide();
                                            window.location.reload();
                                        }
                                    });
                                }
                                window.location.reload();
                            });
                        });
                        // 隐藏信息
                        graphView.addInteractorListener(function (e) {
                            if (e.kind === 'clickBackground') {
                                $(".contextmenu").hide();
                            }
                        });
                    });
                    /* 双击显示设备信息、移除设备功能 END */

                    /* 鼠标悬停到节点上显示内容 START */
                    graphView.enableToolTip();
                    graphView.getToolTip = function(e) {
                        var data = graphView.getDataAt(e);
                        if (!data) return '';
                        var label = '';
                        if (!(data instanceof ht.Text)) {
                            if('${areaList}'.indexOf(data) > 0) {
                                return;
                            } else {
                                label =
                                        '<p><em>设备ID：</em>'+"<span style='color: #ff0000;'>" + data.getStyle('label') + "</span>"+'</p>'
                                        + '<p><em>描述：</em>'+"<span style='color: #ff0000;'>" + data.getImage() + "</span></p>";
                            }                        }
                        return label;
                    };
                    /* 鼠标悬停到节点上显示内容 END */

                    /* 图形拖拽 START*/
                    graphView.addInteractorListener(function (e) {
                        if (e.kind === 'endMove') { // 结束移动
                            $.ajax({
                                url: editEqpBoardURL+"/EqpBoard/changeLocation?a=" + new Date().getTime(),
                                data: {
                                    'id': Number(items.ID),
                                    'x': shapeNode.getPosition().x,
                                    'y': shapeNode.getPosition().y
                                },
                                success: function () {
                                    return;
                                }
                            });
                        }
                    });
                    /* 图形拖拽 END*/

                    /* 旋转 START*/
                    graphView.addInteractorListener(function (e) {
                        if (e.kind === 'endEditRotation') { // 结束旋转
                            if (shapeNode.getRotation() == null
                                    || isNaN(shapeNode.getRotation())) {
                                $.ajax({
                                    url: editEqpBoardURL+"/EqpBoard/changeRotation?a=" + new Date().getTime(),
                                    data: {
                                        'id': Number(items.ID),
                                        'rotation': 0
                                    },
                                    success: function () {
                                        document.location.reload();
                                    }
                                });
                            } else {
                                $.ajax({
                                    url: editEqpBoardURL+"/EqpBoard/changeRotation?a=" + new Date().getTime(),
                                    data: {
                                        'id': Number(items.ID),
                                        'rotation': shapeNode.getRotation()
                                    },
                                    success: function () {
                                        return;
                                    }
                                });
                            }
                        }
                    });
                    /* 旋转 END*/

                    /* 编辑图元大小和位置 START*/
                    graphView.addInteractorListener(function (e) {
                        if (e.kind === 'hover') {
                            $.ajax({
                                url: editEqpBoardURL+"/EqpBoard/editRectShapeInfo?a=" + new Date().getTime(),
                                data: {
                                    'id': Number(items.ID),
                                    'x': shapeNode.getPosition().x,
                                    'y': shapeNode.getPosition().y,
                                    'width': shapeNode.getSize().width,
                                    'height': shapeNode.getSize().height
                                },
                                success: function () {
                                    return;
                                }
                            });
                        }
                    });
                    /* 编辑图元大小和位置 END*/
                });
            }
        });
    }
</script>